<template>
	<div class="top-right-btn" :style="style">
		<el-row>
			<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
				v-if="search">
				<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="刷新" placement="top">
				<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
				<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px">
					<el-button size="mini" circle icon="el-icon-menu" />
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item >
							<div style="display: flex;justify-content: space-between;align-items: center;">
								<span style="font-weight: bold;">显示字段</span>
								<el-button type="text" @click="columnShowChongzhi">重置</el-button>
							</div>
						</el-dropdown-item>
						<template v-for="item in columns">
							<el-dropdown-item :key="item.key" v-if="item.type != 'selection'">
								<el-checkbox :checked="item.isShow" @change="checkboxChange($event, item)"
									:label="item.label" />
							</el-dropdown-item>
						</template>
					</el-dropdown-menu>
				</el-dropdown>
			</el-tooltip>
		</el-row>
		<el-dialog :title="title" :visible.sync="open" append-to-body>
			<el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: "RightToolbar",
		data() {
			return {
				// 显隐数据
				value: [],
				// 弹出层标题
				title: "显示/隐藏",
				// 是否显示弹出层
				open: false,
			};
		},
		props: {
			tableName: {
				default: ""
			},
			/* 是否显示检索条件 */
			showSearch: {
				type: Boolean,
				default: true,
			},
			/* 显隐列信息 */
			columns: {
				type: Array,
			},
			/* 是否显示检索图标 */
			search: {
				type: Boolean,
				default: false,
			},
			/* 右外边距 */
			gutter: {
				type: Number,
				default: 10,
			},
		},
		computed: {
			style() {
				const ret = {};
				if (this.gutter) {
					ret.marginRight = `${this.gutter / 2}px`;
				}
				return ret;
			}
		},
		mounted() {
			
		},
		methods: {
			// 搜索
			toggleSearch() {
				this.$emit("update:showSearch", !this.showSearch);
			},
			// 刷新
			refresh() {
				this.$emit("refresh");
			},
			// 右侧列表元素变化
			dataChange(data) {
				for (let item in this.columns) {
					const key = this.columns[item].key;
					this.columns[item].isShow = !data.includes(key);
				}
			},
			// 打开显隐列dialog
			showColumn() {
				this.open = true;
			},
			// 勾选
			checkboxChange(event, item) {
				this.columns.filter(mItem => mItem.label == item.label && item.type != 'selection')[0].isShow = event;
				this.columnSave()
			},
			columnShowChongzhi() {
				this.columnClear()
			},
			columnClear() {
				localStorage.removeItem(this.tableName)
				this.$router.go(0)
			},
			columnSave() {
				let value = this.columns.filter(item => item.type != 'selection').map(item => {
					return {
						prop: item.prop,
						isShow: item.isShow
					}
				})
				localStorage.setItem(this.tableName, JSON.stringify(value))
			},
		},
	};
</script>
<style lang="scss" scoped>
	::v-deep .el-transfer__button {
		border-radius: 50%;
		padding: 12px;
		display: block;
		margin-left: 0px;
	}

	::v-deep .el-transfer__button:first-child {
		margin-bottom: 10px;
	}
	
	.top-right-btn {
	  position: relative;
	  float: right;
	}
</style>